<!-- Headers -->
<div class="container-fluid" style="padding:0;">
  <!-- Header -->
  <header class="header">
    <div class="page-header">
      <span class="logo glyphicon glyphicon-home"></span>
      <span class="title">控制面板</span>
    </div>
  </header>

  <!-- Sub Header -->
  <header class="header sub hide">
      <div class="row-fluid">
        <div class="toolbar">
          <button type="button" class="btn btn-success btn-xs">Extra small button</button>
          <button type="button" class="btn btn-default btn-xs">Extra small button</button>
        </div>
        <div class="toolbar pull-right">
          <button type="button" class="btn btn-default btn-xs">Extra small button</button>
          <button type="button" class="btn btn-default btn-xs">Extra small button</button>
        </div>
      </div>
  </header>
</div>

<!-- Main component for a primary marketing message or call to action -->
<div class="container-fluid body">
  <div class="row">
    <div class="col-md-9 col-md-push-3">

      <div class="panel panel-default" id="sys-user-info">
        <div class="panel-heading">最近登录</div>
        <div class="panel-body">
          <div class="col-xs-12 col-sm-6 col-md-8">
            <strong><a href="#" name="name"></a></strong>
            <small class="small" name="role"></small>
          </div>
          <div class="col-xs-6 col-md-4" name="date"><span class="logo glyphicon glyphicon-calendar"></span> </div>
        </div>
      </div>

      <div class="panel panel-default" id="sys-site-info">
        <!-- Default panel contents -->
        <div class="panel-heading">站点信息</div>
        <!-- List group -->
        <ul class="list-group">
          <li class="list-group-item" name="sys"><span class="glyphicon glyphicon-th-large"></span> OS </li>
          <li class="list-group-item" name="php"><span class="glyphicon glyphicon-cog"></span> PHP </li>
          <li class="list-group-item" name="time"><span class="glyphicon glyphicon-time"></span> Time </li>
          <li class="list-group-item" name="mysql"><span class="glyphicon glyphicon-hdd"></span> MySQL </li>
        </ul>
      </div>
      
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">近期项目</div>
        <div class="panel-body">
          <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>

        <!-- Table -->
        <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="col-md-3 col-md-pull-9">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">材料入库</a></li>
        <li>
          <a href="#">
            <span class="badge pull-right">3</span>
            录入材料计划
          </a>
        </li>
      </ul>
    </div>

  </div>
</div>


<script type="text/javascript">
  function load() {
    load_user_info();
    load_sys_info();
  }
  function load_user_info() {
    $.ajax({
      url: 'user/info',
      success: function(data, status) {
        if (data == undefined || data.status == undefined || data.status != 0 || data.user == undefined) $("#sys-user-info").attr('class', 'panel panel-danger');
        if (data.user.login_time != undefined) $("#sys-user-info").find("div[name='date']").append(data.user.login_time + ' At ' + data.user.login_ip);
        if (data.user.name != undefined) $("#sys-user-info").find("a[name='name']").html(data.user.name);
        if (data.user.role != undefined) $("#sys-user-info").find("small[name='role']").html('Root');
      },
      error: function(hxr, status, error) {
        $("#sys-user-info").attr('class', 'panel panel-danger');
      }
   });
  }

  function load_sys_info() {
    $.ajax({
      url: 'system/info',
      success: function(data, status) {
        if (data == undefined) $("#sys-site-info").attr('class', 'panel rpanel-danger');
        if (data.sys != undefined) $("#sys-site-info").find("li[name='sys']").append(data.sys);
        if (data.php != undefined) $("#sys-site-info").find("li[name='php']").append(data.php);
        if (data.time != undefined) $("#sys-site-info").find("li[name='time']").append(data.time);
        if (data.mysql != undefined) $("#sys-site-info").find("li[name='mysql']").append(data.mysql);
      },
      error: function(hxr, status, error) {
        $("#sys-site-info").attr('class', 'panel panel-danger');
      }
   });
  }
</script>